<template>
  <div class="app-container">
    <!--计费规则-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:site:edit']"
        >修改</el-button>
      </el-col>
    </el-row>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div>
        起步价
        <el-input class="billing_input" disabled v-model="form.minkm0" placeholder="请输入">
          <template slot="append">km</template>
        </el-input>
        —
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.minkm" placeholder="请输入">
          <template slot="append">km</template>
        </el-input>
        ，
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.minkg" placeholder="请输入">
          <template slot="append">kg</template>
        </el-input>
        内的
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.minfee" placeholder="请输入">
          <template slot="append">元</template>
        </el-input>
        配送时长为
        <el-input class="billing_input" disabled v-model="form.maxmin" placeholder="请输入">
          <template slot="append">min</template>
        </el-input>
        —
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.minmin" placeholder="请输入">
          <template slot="append">min</template>
        </el-input> ；
      </div>
      <div>
        每超过
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.perkm" placeholder="请输入">
          <template slot="append">km</template>
        </el-input>
        的，每km增加
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.perkmfee" placeholder="请输入">
          <template slot="append">元</template>
        </el-input>
        ,配送时长增加
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.perkmmin" placeholder="请输入">
          <template slot="append">min</template>
        </el-input> ；
      </div>
      <div>
        每超过
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.perkg" placeholder="请输入">
          <template slot="append">kg</template>
        </el-input>
        的，每kg增加
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.perkgfee" placeholder="请输入">
          <template slot="append">元</template>
        </el-input> ；
      </div>

      <div>
        服务费
        <el-input class="billing_input" :disabled="banUpdate" v-model="form.fee" placeholder="请输入">
          <template slot="append">元</template>
        </el-input>。
      </div>
    </el-form>
    <div class="" v-if="!banUpdate">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { billingInfo, billingInfoUpdate } from "@/api/pt/commissionConfig.js";
import { getToken } from "@/utils/auth";
import { areajson } from "@/utils/area.js";

export default {
  name: "User",
  data() {
    return {
      single:false,
      banUpdate: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 查询参数
      queryParams: {
      },
      form:{
        minkm0: 0,
        minmin0: 0,
        fee: 0,     //服务费
        maxmin: 0,    //	起步时间/min
        minfee: 0,    //起步费用
        minkg: 0,     //起步重量/kg
        minkm: 0,     //	起步距离/km
        minmin: 0,    //起步时间/min
        perkg: 0,     //每超出kg数kg
        perkgfee: 0,  //	每超出kg数费用
        perkm: 0,     //每超出km数
        perkmfee: 0,      //每超出km数费用
        perkmmin: 0,      //每超出km数时间
      },
      rules:{
      }
    };
  },
  created() {
    this.getList();

  },
  methods: {

    /** 查询列表 */
    getList() {
      this.loading = true;
      billingInfo().then(response => {
        this.form = response.data;
        this.loading = false;
      }).catch(err=>{
        this.msgError(err);
      });
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.status === 0 ? "启用" : "关闭";
      this.$confirm('确认要' + text + '"' + row.name + '"吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          row.time = [new Date(row.startTime),new Date(row.endTime)]
          return addSchool(row)
        }).then(() => {
          this.msgSuccess(text + "成功");
        }).catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    cancel(){
      this.banUpdate = true
    },
    handleUpdate(){
      this.banUpdate = !this.banUpdate
    },
    /** 提交按钮 */
    submitForm: function() {
      billingInfoUpdate(this.form).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.banUpdate = true;
          this.getList();
        } else {
          this.msgError(response.message);
        }
      });
    },
  }
};
</script>

<style type="text/css">
  .dian {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #999;
    margin-right: 6px;
  }
  .billing_input {
    width: 200px;
    margin-bottom: 20px;
  }
</style>
